{extend name="public/common"}

{block name="style"}
<title>公章使用审批</title>
<link rel="stylesheet" href="/home/css/approval/add.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="type-title">公章使用审批</div>
    <div class="form" id="officialseal">
        <ul>
            <li>
                <p>类型：</p>
                <div class="box">公章使用</div>
            </li>
            <li>
                <p>申请标题：</p>
                <input type="text" v-model="title" placeholder="请输入申请标题" :maxlength="50">
            </li>
            <li>
                <p>申请部门：</p>
                <div class="box">{{user.department_name}}</div>
            </li>
            <li>
                <p>发往单位：</p>
                <input type="text" v-model="department" placeholder="请输入发往单位">
            </li>
            <li>
                <p>申请人：</p>
                <div class="box">{{user.name}}</div>
            </li>
            <li>
                <p>审批人：</p>
                <div @click="toggleApprover" :class="approver.nowType.userid == 0 ? 'special box' : 'box'">{{approver.nowType.username}}</div>
                <mt-popup  position="bottom"  v-model="approver.popupVisible" class="mint-popup">
                    <div class="picker-toolbar">
                        <span class="mint-datetime-action mint-datetime-cancel" @click="toggleApprover">取消</span>
                        <span class="mint-datetime-action mint-datetime-confirm" @click="approverConfirm">确定</span>
                    </div>
                    <div class="picker-day special-day"></div>
                    <mt-picker :slots="approver.slots" value-key="username" @change="selectApprover"></mt-picker>
                </mt-popup>
            </li>
            <li>
                <p>内容摘要：</p>
                <div class="textarea">
                    <textarea type="text" v-model="remark" placeholder="请输入内容摘要" oninput="if(value.length>200)value=value.slice(0,200);"></textarea>
                    <span>{{remark.length}} / 200字</span>
                </div>
            </li>
            <li>
                <p>图片上传(最多6张)：</p>
                <div class="img-box">
                    <div class="img" v-for="(imgUrl,index) of img">
                        <img @click="delImg(index)" class="close" src="/home/images/common/close.png"/>
                        <img :src="imgUrl" @click="loadImg(imgUrl,img)"/>
                    </div>
                    <div class="img add" @click="imgUpload" v-if="img.length < 6">
                        <img src="/home/images/common/add.png"/>
                    </div>
                </div>
                <form ref="myform">
                    <input type="file" accept="image/jpg, image/png, image/gif, image/jpeg" @change="handleFileChange"
                           ref="upimg" style="display: none;">
                </form>
            </li>
        </ul>
    </div>
    <div class="foot">
        <div class="cancel" @click="cancel">取消</div>
        <div class="confirm" @click="subimtAjax">确定</div>
    </div>
</div>
{/block}

{block name="script"}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    console.log({$apply_user})
    var vw = new Vue({
        el: "#app",
        data: {
            type: 2,
            user: {$apply_user},
            department: '',
            approver: {
                slots: [
                    {
                        values: {$approval_user},
                        defaultIndex: 1
                    }
                ],
                nowType: {
                    username: '请选择审批人',
                    userid: 0
                },
                onChangeType: {
                    username: '请选择审批人',
                    userid: 0
                },
                popupVisible:false
            },
            remark: '',
            id:0,
            approvalUser: [],
            clickLoading: true,
            img: [],
            title: ''
        },
        watch:{
            startTime(val,oldVal) {
                this.end_time = new Date(val * 1000);
                this.countTime();
            },
            endTime(val,oldVal) {
                this.temp_time = new Date(val * 1000);
                this.countTime();
            }
        },
        created() {
            wx.config({
                debug: false,
                appId: {$jsSign}.appid,
                timestamp:{$jsSign}.timestamp ,
                nonceStr: {$jsSign}.noncestr,
                signature: {$jsSign}.signature,
                jsApiList: ['previewImage']
            });
            if(window.location.href.indexOf('id') > -1) {
                var hrefs = window.location.href.split("/"),
                    ids = hrefs[hrefs.length - 1].split("."),
                    _this = this;
                _this.id = ids[0];
                _this.$indicator.open({
                    text: '正在获取中',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post('{:Url("Approval/getDetail")}',{
                    'id': _this.id,
                    'class': _this.type
                },{emulateJSON:true}).then(function (res) {
                    var data = res.body;
                    _this.$indicator.close();
                    console.log(data)
                    if(data.code == 1){
                        _this.title = data.data.title;
                        _this.department = data.data.to_company;
                        _this.remark = data.data.content;
                        Object.assign(_this.approvalUser,data.data.approval_user);
                        _this.approver.nowType.userid = data.data.apply_user == data.data.approval_user[0].approval_user?data.data.approval_user[1].approval_user:data.data.approval_user[0].approval_user;
                        _this.approver.nowType.username = data.data.apply_user == data.data.approval_user[0].approval_user?data.data.approval_user[1].username:data.data.approval_user[0].username;
                        _this.img = data.data.images;
                    }else{
                        _this.$toast({
                            message: data.msg,
                            duration: 1500
                        });
                    }
                }, function (res) {
                    _this.$indicator.close();
                    _this.$toast({
                        message: "获取失败，请重试！",
                        duration: 1500
                    });
                });
            }

        },
        mounted(){
            var _this = this;
            _this.$nextTick(function() {
                setTimeout(function() {
                    _this.approver.slots[0].defaultIndex = 0;
                }, 100);
            });
        },
        methods: {
            toggleApprover(){
                var _this = this;
                _this.approver.popupVisible = !_this.approver.popupVisible;
            },
            approverConfirm(){
                var _this = this;
                if(_this.approver.nowType != _this.approver.onChangeType){
                    _this.approver.nowType = _this.approver.onChangeType;
                    if(_this.id != 0) {
                        _this.approvalUser[0].username = _this.approver.nowType.username;
                        _this.approvalUser[0].approval_user = _this.approver.nowType.userid;
                    }
                }
                _this.approver.popupVisible = !_this.approver.popupVisible;
            },
            selectApprover(p,v){
                var _this = this;
                if(v[0]){
                    _this.approver.onChangeType = v[0];
                }
            },
            delImg(e) {
                this.img.splice(e, 1);
                this.$refs.myform.reset(); //表单重置，解决input onchange选重问题
            },
            imgUpload() {
                var upImg = this.$refs.upimg;
                upImg.click();
            },
            handleFileChange(e) {
                var _this = this;
                var upImg = _this.$refs.upimg;
                var img = upImg.files[0];
                if (img) {
                    var newSize = (img.size / 1024).toFixed(2);
                    if (newSize <= 10240) {
                        _this.$indicator.open({
                            text: '图片上传中',
                            spinnerType: 'triple-bounce'
                        });
                        var formData = new FormData();
                        formData.append('picture', img);
                        _this.$http.post("{:Url('File/uploadPicture')}", formData).then(function (res) {
                            var data = JSON.parse(res.data);
                            console.log(data)
                            if (data.code == 1) {
                                // 在获取到文件对象进行预览
                                _this.$indicator.close();
                                _this.img.push(data.data.path); //上传后图片路径
                                this.$refs.myform.reset(); //表单重置，解决input onchange选重问题
                            } else {
                                _this.$indicator.close();
                                _this.$toast({
                                    message: "上传失败，请重新上传！",
                                    duration: 1500
                                });
                            }
                        }, function (res) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "上传失败，请重新上传！",
                                duration: 1500
                            });
                        });
                    } else {
                        _this.$toast("单张上传图片大小不能超过10M,请重新上传！");
                    }
                }
            },
            //            微信jssdk - 图片预览
            loadImg(src, imglist) {
                var urls = [];
                var current = window.location.protocol + '//' + window.location.host + src;
                for (var i in imglist) {
                    urls[i] = window.location.protocol + '//' + window.location.host + imglist[i];
                }
                wx.previewImage({
                    current: current,
                    urls: urls
                });
            },
            cancel(){
                window.history.go(-1)
            },
            subimtAjax() {
                var _this =this;
                if(!_this.clickLoading) {
                    return false;
                }
                _this.$messagebox.confirm('是否确认提交','在线审批').then(function () {
                    if(!_this.title) {
                        _this.$toast({
                            message:"请输入申请标题",
                            duration:1500
                        });
                        return false;
                    }
                    if(_this.to_company == ''){
                        _this.$toast({
                            message:"请输入发往单位",
                            duration:1500
                        });
                        return false;
                    }
                    if(_this.approver.nowType.userid == 0){
                        _this.$toast({
                            message:"请选择审批人",
                            duration:1500
                        });
                        return false;
                    }
                    _this.clickLoading = false;
                    _this.$indicator.open({
                        text: '正在发布中',
                        spinnerType: 'triple-bounce'
                    });
                    var data = {
                        'class':_this.type,
                        'apply_department':_this.user.department,
                        'to_company':_this.department,
                        'apply_user':_this.user.userid,
                        'content':_this.remark,
                        'images': _this.img,
                        'title': _this.title
                    };
                    if(_this.id != 0) {
                        var url = '{:Url("Approval/edit")}';
                        data.id = _this.id;
                        var obj = {
                            'content': data,
                            'approval_user': _this.approvalUser
                        }
                    } else {
                        var url = '{:Url("Approval/officialseal")}',
                            obj = data;
                        obj.approval_user = _this.approver.nowType.userid;
                    }
                    _this.$http.post(url,obj,{emulateJSON:true}).then(function (res) {
                        var data = res.body;
                        console.log(data)
                        _this.$indicator.close();
                        if(data.code == 1){
                            _this.$toast({message:'提交成功',iconClass: 'icon', duration:1500});
                            window.sessionStorage.setItem('approval_type','2');
                            setTimeout(function () {
                                if(_this.id != 0) {
                                    window.location.replace('/home/approval/index.html');
                                    window.sessionStorage.setItem('approval_type','2');
                                } else {
                                    window.history.go(-1);
                                }
                            },1000);
                        }else{
                            _this.clickLoading = true;
                            _this.$toast({
                                message: data.msg,
                                duration: 1500
                            });
                        }
                    }, function (res) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "提交失败，请重试！",
                            duration: 1500
                        });
                    });
                });

            }
        }
    })
</script>
{/block}
